<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 6000px;
            height: 8000px;
        }

        h1 {
            width: 200px;
            height: 200px;
            border: 2px solid;
            padding: 1rem;
            /*16px*/
            padding: 1em;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 32px */
            padding: 2em;
        }
    </style>
</head>

<body>

    <h1>Lorem ipsum dolor sit amet.
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, architecto!</p>
    </h1>

    <script>
        // let h1 = document.getElementsByTagName('h1')[0];
        // console.log(h1.offsetWidth, h1.offsetHeight);

        // console.log(window.pageXOffset, pageYOffset);

        /**
         * location=url
         * window.location=url
         * location.href=url
         * location.assign()
         * location.replace()
         * history.go()
        */

        let arr1 = [10, 12, 13, 7, 6, 3], arr2 = [11, 12, 8, 6, 9, 10, 33];
        //交集与差集
        //交集
        let arr3 = arr1.filter(item => arr2.includes(item))
        console.log(arr3);

        //差集
        let arr4 = arr1.filter(item => !arr2.includes(item))
        let arr5 = arr2.filter(item => !arr1.includes(item))
        console.log(arr4,arr5);

    </script>



</body>

</html>